<template>
  <div class="bookmark-page">
    <van-nav-bar
      title="收藏夹"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="bookmark-tabs">
      <van-tabs v-model:active="activeTab" animated swipeable>
        <van-tab title="文章">
          <div class="bookmark-list">
            <template v-if="bookmarks.articles.length > 0">
              <div 
                v-for="(item, index) in bookmarks.articles" 
                :key="index" 
                class="bookmark-item"
                @click="navigateTo(`/blog/${item.id}`)"
              >
                <div class="bookmark-content">
                  <div class="bookmark-title">{{ item.title }}</div>
                  <div class="bookmark-desc">{{ item.description }}</div>
                  <div class="bookmark-meta">
                    <span>{{ item.author }}</span>
                    <span>{{ item.date }}</span>
                  </div>
                </div>
                <div class="bookmark-cover" v-if="item.cover">
                  <img :src="item.cover" :alt="item.title">
                </div>
              </div>
            </template>
            <div v-else class="empty-state">
              <van-empty description="暂无收藏文章" />
            </div>
          </div>
        </van-tab>
        
        <van-tab title="视频">
          <div class="bookmark-list">
            <template v-if="bookmarks.videos.length > 0">
              <div 
                v-for="(item, index) in bookmarks.videos" 
                :key="index" 
                class="bookmark-item"
                @click="navigateTo(`/video/${item.id}`)"
              >
                <div class="bookmark-content">
                  <div class="bookmark-title">{{ item.title }}</div>
                  <div class="bookmark-desc">{{ item.description }}</div>
                  <div class="bookmark-meta">
                    <span>{{ item.author }}</span>
                    <span>{{ item.duration }}</span>
                  </div>
                </div>
                <div class="bookmark-cover">
                  <img :src="item.cover" :alt="item.title">
                </div>
              </div>
            </template>
            <div v-else class="empty-state">
              <van-empty description="暂无收藏视频" />
            </div>
          </div>
        </van-tab>
        
        <van-tab title="网站">
          <div class="bookmark-list">
            <template v-if="bookmarks.websites.length > 0">
              <div 
                v-for="(item, index) in bookmarks.websites" 
                :key="index" 
                class="bookmark-item"
                @click="openUrl(item.url)"
              >
                <div class="bookmark-content">
                  <div class="bookmark-title">{{ item.title }}</div>
                  <div class="bookmark-desc">{{ item.url }}</div>
                  <div class="bookmark-meta">
                    <span>{{ item.date }}</span>
                  </div>
                </div>
                <div class="bookmark-icon">
                  <van-icon name="link" size="24" />
                </div>
              </div>
            </template>
            <div v-else class="empty-state">
              <van-empty description="暂无收藏网站" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const activeTab = ref(0)

// 模拟收藏数据
const bookmarks = ref({
  articles: [
    {
      id: 1,
      title: '如何提高Vue3开发效率',
      description: '本文介绍了Vue3开发中的一些实用技巧和最佳实践，帮助你提高开发效率。',
      author: '张三',
      date: '2023-05-15',
      cover: 'https://picsum.photos/200/112?random=1'
    },
    {
      id: 2,
      title: 'TypeScript入门指南',
      description: '从零开始学习TypeScript，掌握类型系统和高级特性。',
      author: '李四',
      date: '2023-06-20',
      cover: 'https://picsum.photos/200/112?random=2'
    }
  ],
  videos: [
    {
      id: 1,
      title: 'Vue3组件化开发实战',
      description: '学习如何使用Vue3进行组件化开发，提高代码复用率。',
      author: '王五',
      duration: '25:30',
      cover: 'https://picsum.photos/200/112?random=3'
    }
  ],
  websites: [
    {
      id: 1,
      title: 'Vue.js官方文档',
      url: 'https://vuejs.org',
      date: '2023-04-10'
    },
    {
      id: 2,
      title: 'Vant UI组件库',
      url: 'https://vant-ui.github.io/vant',
      date: '2023-04-15'
    }
  ]
})

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path)
}

// 打开外部链接
const openUrl = (url) => {
  window.open(url, '_blank')
  showToast('正在打开外部链接')
}
</script>

<style lang="scss" scoped>
.bookmark-page {
  min-height: 100vh;
  background-color: var(--background-color);
  padding-bottom: calc(var(--tabbar-height) + 20px);
  
  .bookmark-tabs {
    margin-top: 8px;
  }
  
  .bookmark-list {
    padding: 12px;
    
    .bookmark-item {
      display: flex;
      padding: 12px;
      margin-bottom: 12px;
      background-color: var(--background-color-light);
      border-radius: 8px;
      box-shadow: var(--box-shadow);
      
      .bookmark-content {
        flex: 1;
        margin-right: 12px;
        
        .bookmark-title {
          font-size: 16px;
          font-weight: 500;
          color: var(--text-color);
          margin-bottom: 6px;
          line-height: 1.4;
        }
        
        .bookmark-desc {
          font-size: 14px;
          color: var(--text-color-secondary);
          margin-bottom: 8px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .bookmark-meta {
          display: flex;
          font-size: 12px;
          color: var(--text-color-tertiary);
          
          span {
            margin-right: 12px;
          }
        }
      }
      
      .bookmark-cover {
        width: 100px;
        height: 80px;
        border-radius: 4px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .bookmark-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        color: var(--primary-color);
      }
    }
  }
  
  .empty-state {
    padding: 40px 0;
  }
}
</style> 